﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title></title>
    <meta name="viewport" content = "width = device-width, initial-scale = 1.0, minimum-scale = 1.0, maximum-scale = 1.0, user-scalable = no" />
  
    <link href="css/footable-0.1.css" rel="stylesheet" type="text/css" />
    <link href="css/footable.sortable-0.1.css" rel="stylesheet" type="text/css" />

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>

    <script src="js/footable.js" type="text/javascript"></script>
    <script src="js/footable.sortable.js" type="text/javascript"></script>

    <script type="text/javascript">
      $(function() {
        $('table').footable();
      });
    </script>
    <style>
      .test-class { background-color: #5BFF82; }
    </style>
  </head>
  <body>
    <table class="footable">
      <thead>
        <tr>
          <th colspan="3" data-hide="phone" data-ignore="true" data-sort-ignore="true"></th>
          <th>ID</th>
          <th>Date 1</th>
          <th data-hide="phone" colspan="3" data-sort-match="1" data-names="Date 2,Date 3,Date 4" data-class="test-class">Dates 2, 3, 4 (Sorts on 3)</th>
          <th data-hide="phone,tablet">Date 5</th>
          <th data-hide="phone,tablet">Note</th>
          <th data-hide="phone,tablet">Section</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <input type="checkbox"/>
          </td>
          <td>2</td>
          <td>
            <img src="images/disabled.png" />
          </td>
          <td>000-003</td>
          <td>03/01/2014</td>

          <td>10/01/2016</td>
          <td>01/01/2014</td>
          <td>23/01/2014</td>

          <td>18/01/2014</td>
          <td>&nbsp;</td>
          <td>INT</td>
        </tr>
        <tr>
          <td>
            <input type="checkbox"/>
          </td>
          <td>3</td>
          <td>
            <img src="images/disabled.png" />
          </td>
          <td>000-001</td>
          <td>03/01/2015</td>

          <td>10/01/2015</td>
          <td>02/01/2014</td>
          <td>24/01/2014</td>

          <td>18/01/2015</td>
          <td>&nbsp;</td>
          <td>INT</td>
        </tr>
        <tr>
          <td>
            <input type="checkbox"/>
          </td>
          <td>1</td>
          <td>
            <img src="images/disabled.png" />
          </td>
          <td>000-002</td>
          <td>03/01/2016</td>

          <td>10/01/2014</td>
          <td>03/01/2014</td>
          <td>22/01/2014</td>

          <td>18/01/2016</td>
          <td>&nbsp;</td>
          <td>INT</td>
        </tr>
      </tbody>
    </table>

  </body>
</html>